<!DOCTYPE html>
<html lang="en">
<head>
    <title>Leaflet</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="lib/leaflet.css" type="text/css">
    <link rel="stylesheet" href="style/map.css" type="text/css">
    <script src="lib/leaflet.js"></script>
    <script src="lib/proj4.min.js"></script>
    <script src="js/typhoon-leaflet.js"></script>
</head>
<body>
<div class="tools">
    <button id="202203">202203</button>
    <button id="remove202203">移除202203</button>
    <button id="202016">202016</button>
    <button id="remove202016">移除202016</button>
    <button id="china">中国</button>
    <button id="hongkong">中国香港</button>
</div>
<div id="map" class="map"></div>
<script>
    const map = L.map('map', {
        preferCanvas: true
    }).setView([26.45090222367265, 114.43359375000001], 5);
    L.tileLayer('http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8').addTo(map);

    const player = new TyphoonPlayer(map)

    document.getElementById('202203').onclick = function () {
        player.playTyphoon('202203')
    }
    document.getElementById('remove202203').onclick = function () {
        player.removeTyphoon('202203')
    }
    document.getElementById('202016').onclick = function () {
        player.playTyphoon('202204')
    }
    document.getElementById('remove202016').onclick = function () {
        player.removeTyphoon('202204')
    }

    let visible = {
        'china': false,
        'hongkong': false
    }

    document.getElementById('china').onclick = function () {
        visible['china'] = !visible['china']
        player.setForecastVisible(visible['china'], '中国')
    }

    document.getElementById('hongkong').onclick = function () {
        visible['hongkong'] = !visible['hongkong']
        player.setForecastVisible(visible['hongkong'], '中国台湾')
    }
</script>
</body>
</html>